<template>
  <view class="quick-com">
    <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
      activeColor="#22b9a3"></uni-segmented-control>
    <view class="content">
      <view v-show="current === 0">
        <view class="items">
          <view class="item" v-for="(resource,index) in resourceType" :key="index">
            <img :src="resource.url" alt="" />
            <view class="desc">
              {{resource.type}}
            </view>
          </view>
        </view>
      </view>
      <view v-show="current === 1" >
        选项卡2的内容
      </view>
      <view v-show="current === 2">
        选项卡3的内容
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive,
    onMounted
  } from 'vue'
  import * as http from '@/utils/http'
  const items = reactive(['高一年级', '高二年级', '高三备考'])
  const current = ref(0)
  const resourceType = reactive([{
      type: "基础知识汇总",
      url: '/static/images/resource/jczs.png'
    },
    {
      type: "试卷",
      url: '/static/images/resource/shijuan.png'
    }, {
      type: "听力",
      url: '/static/images/resource/tlzy.png'
    }, {
      type: "阅读",
      url: '/static/images/resource/ydzy.png'
    }, {
      type: "写作",
      url: '/static/images/resource/xzzy.png'
    }
  ])

  function onClickItem(e) {
    if (current.value != e.currentIndex) {
      current.value = e.currentIndex;
    }
  }
  //跳转到项目列表页面
  function gotoProjectList(projectId, projectName) {
    uni.navigateTo({
      url: `/pages/project/project-list/project-list?projectId=${projectId}&projectName=${projectName}`
    })
  }

  function gotoPoject() {
    uni.switchTab({
      url: '/pages/project/project'
    })
  }
</script>

<style lang="scss" scoped>
  .quick-com {
    padding: 20rpx;
    background-color: $uni-bg-color;
    .content{
        margin-top: 20rpx;
      .items{
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        .item{
          margin-top: 20rpx;
          margin-bottom: 20rpx;
          margin-right: 40rpx;
          image{
            width: 192rpx;
            height: 168rpx;
          }
          .desc{
            font-size: 30rpx;
            font-family: "Tahoma";
            color: #46464c;
            text-align: center;
          }
        }
      }
   
    }
  }
</style>